@import url('iosevka/webfont.css');
@import url('iosevka-slab/webfont.css');

.thin, .wght-100
	font-weight: 100;

.extralight, .wght-200
	font-weight: 200;

.light, .wght-300
	font-weight: 300;

.medium, .wght-500
	font-weight: 500;

.semibold, .wght-600
	font-weight: 600;

.bold, .wght-700
	font-weight: 700;

.extrabold, .wght-800
	font-weight: 800;

.heavy, .wght-900
	font-weight: 900;

.italic
	font-style: italic;

.slab
	font-family: 'Iosevka Slab Web', monospace;

	&.oblique
		font-family: 'Iosevka Slab Web Oblique', monospace;

.oblique
	font-family: 'Iosevka Web Oblique', monospace;

html, body
	margin: 0;
	padding: 0;

body
	font-family: 'Iosevka Web';
	background: #008000;
	padding-bottom: 60em;
	font-size: 15px;

pre, code
	font-family: 'Iosevka Web';

::-webkit-scrollbar
	display: none;

body > section
	margin: 3em auto;
	width: 900px;
	background: white;

/* hljs */
section.preview
	text-align: center;
	font-size: 80%;

section.preview pre
	display: inline-block;
	text-align: left;
	margin: 1.2rem 0;
	line-height: 1.5;

section.color-light
	background-color: hsl(39, 6%, 95%);
	color: #333;

.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title
	color: #446fbd;

.color-light .comment
	color: hsl(0, 0%, 62%);

.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in
	color: #8757ad;

.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value
	color: #e88501;

.color-light .number, .color-light .xml .attribute
	color: #6d8600;

.color-light .operator
	color: #c33500;

section.color-dark
	background-color: hsl(39, 6%, 12%);
	color: #cfcfcf;

.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title
	color: #6c9ef8;

.color-dark .comment
	color: #767676;

.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in
	color: #b77fdb;

.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value
	color: #D89333;

.color-dark .number, .color-dark .xml .attribute
	color: #85a300;

.color-dark .operator
	color: #c34564;

section#matrix
	height: 480px;
	position: relative;

	> div
		position: absolute;
		font-size: 90px;
		left: 50%;
		margin-left: -4.75em;
		top: 50%;
		margin-top: -1.95em;

		> row
			display: block;
			text-align: center;
			line-height: 0.8em;

			> span
				font-size: 0.4em;
				padding: 0 0.5em;

		&.slab
			margin-left: -4.25em;
			margin-top: -1.44em;

section#matrix > div > row > span
	font-size: 0.4em;
	padding: 0 0.5em;

section.opentype
	width: 30em;
	padding: 1.5em 8em;

	> h2
		display: none;

	> div.hr
		font-size: 80%;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		margin: 3rem auto;
		text-align: center;
		display: block;

		&:before, &:after
			content: '';
			display: inline-block;
			border-bottom: 1px solid #ddd;
			width: 4em;
			margin: 0 1em;
			vertical-align: 0.3em;

	> ol.narrow
		width: 40em;
		list-style: none;
		margin: 0 -5em;
		padding: 0;
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
		overflow: hidden;

		> li
			flex: none;
			border-left: 1px solid #ddd;
			margin-left: -1px;
			margin-bottom: 1em;

		ol.group
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;

		ol.group > li
			margin: 0 0.5em;
			padding: 0;
			border: none;
			width: 4em;
			flex: none;
			display: flex;
			justify-content: center;
			position: relative;

			> .tag
				font-size: 0.75em;
				display: block;
				position: absolute;
				width: auto;
				left: 50%;
				top: 0;
				margin-left: calc(-1em);

				&:before, &:after
					position: absolute;
					content: '';
					display: block;
					width: 0.75em;
					border-bottom: 1px solid #ddd;
					top: 0.6em;

				&:before
					right: 100%;
					margin-right: 0.25em;

				&:after
					left: 100%;
					margin-left: 0.25em;

			> .sample
				display: inline-block;
				font-size: 2em;
				margin-top: 0.5em;
				width: 1em;
				text-align: center;

	> ol.wide
		list-style: none;
		margin: 0 -5em;
		padding: 0;
		font-size: 1em;
		width: 40em;

		> li
			margin: 0;
			padding: 0;
			position: relative;
			height: 4.25em;
			border-top: 1px solid #eee;
			margin-top: 0.4em;
			padding-top: 0.4em;

			&:first-child
				border-top: none;
				margin-top: 0;

			> .tag
				display: block;
				position: absolute;
				top: calc(0.8em - 0.2em - 1px);
				left: 0;
				font-size: 0.8em;
				width: 2em;
				border: 1px solid rgba(0, 0, 0, 0.25);
				padding: 0.2em;
				padding-bottom: 0.1em;
				text-align: center;
				border-radius: 0.2em;

			> .description
				display: block;
				position: absolute;
				top: 0.8em;
				right: 0;
				font-style: italic;
				font-size: 0.8em;
				color: rgba(0, 0, 0, 0.5);

			> .sample
				display: block;
				margin-top: 1.6em;

				&.italic
					margin-top: 0.25em;

		b
			font-weight: normal;
			color: #c33500;

#ligations > table
	border-spacing: 0;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	margin: 1em auto;

	th
		white-space: nowrap;

	pre
		margin: 0;

	th, td
		padding: 0.4em 1em;
		text-align: left;

	tr.note
		td
			border-top: 1px solid black;

		font-style: italic;
		color: #c33500;

	em
		font-style: normal;
		color: #444;

		&.rank-2
			color: #c33500;

	s, .nolig
		text-decoration: none;
		opacity: 0.25;

	.nolig
		font-feature-settings: 'calt' 0;